<template>
 <div id="footer">
     <ul> 
         <!-- router默认是a标签 加了tag就就可以换成li标签 -->
         <router-link to="/movie"  tag="li">
             <i class="fa fa-film"></i>
             <p>电影</p>
         </router-link>
         <router-link to="/cinema"  tag="li">
             <i class="fa fa-square"></i>
             <p>影院</p>
         </router-link>
         <router-link to="/mine"  tag="li">
            <i class="fa fa-user-circle"></i>
            <p>我的</p>
         </router-link>
     </ul>
 </div>
</template>

<script>
export default {
   name:'TabBar',

}
</script>

<style scoped>
  #footer{
      position: fixed;
     bottom: 0px; 
     width: 100%;
     background: white;
     border-top: 1px solid #ccc;
  }
  li{
      display: inline-block;
      width: 33%;
      text-align: center;
  }
  /* 点击当前的路由变色 */
  .router-link-active{
      color: #e54847;
  }
</style>